<template>
  <div class='app-container'>
    <!-- 退货商品 -->
    <div class="commodity">
      <el-descriptions title="商品图片" :column="6" :border="true" direction="vertical">
        <el-descriptions-item label="商品图片" label-align="center" label-class-name="my-label" class-name="my-content"
          align="center" width="150px">
          <img class="imgs" :src="returnDetailData.productPic" />
        </el-descriptions-item>
        <el-descriptions-item label="商品名称" label-align="center" align="center" label-class-name="my-label"
          class-name="my-content" width="150px">
          <div>{{ returnDetailData.productName }}</div>
          <div><span>品牌：</span>{{ returnDetailData.productBrand }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="价格/货号" label-align="center" align="center" label-class-name="my-label"
          class-name="my-content" width="150px">
          <div><span>价格：￥</span>{{ returnDetailData.returnAmount }}</div>
          <div><span>货号：</span>{{ returnDetailData.productId }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="属性" label-align="center" align="center" label-class-name="my-label"
          class-name="my-content" width="150px">
          {{ returnDetailData.productAttr }}
        </el-descriptions-item>
        <el-descriptions-item label="数量" label-align="center" align="center" label-class-name="my-label"
          class-name="my-content" width="150px">
          {{ returnDetailData.productCount }}
        </el-descriptions-item>
        <el-descriptions-item label="小计" label-align="center" align="center" label-class-name="my-label"
          class-name="my-content" width="150px">
          <div><span>￥</span>{{ returnDetailData.productRealPrice }}</div>
        </el-descriptions-item>
      </el-descriptions>
      <div class="last"><span>合计:￥</span>{{ returnDetailData.productRealPrice }}</div>
    </div>
    <!-- 服务单信息 -->
    <div class="service">
      <el-descriptions class="first" title="服务单信息" :column="1" border>
        <el-descriptions-item label="服务单号" label-align="left" align="left" label-class-name="my-label"
          class-name="my-content" width="50px">{{ returnDetailData.id }}</el-descriptions-item>
        <el-descriptions-item label="申请状态" label-align="left" align="left" label-class-name="my-label"
          class-name="my-content" width="50px">{{ returnDetailData.status === 0 ? "待处理" : returnDetailData.status === 1 ?
            "退货中" : returnDetailData.status === 2 ? "已完成" : "已拒绝" }}</el-descriptions-item>
        <el-descriptions-item label="订单编号" label-align="left" align="left" label-class-name="my-label"
          class-name="my-content" width="50px">{{ returnDetailData.orderSn }}
          <el-link type="primary" @click="selectOrderDetail">查看</el-link>
        </el-descriptions-item>
        <el-descriptions-item label="申请时间" label-align="left" align="left" label-class-name="my-label"
          class-name="my-content" width="50px">{{
            returnDetailData.createTime ? dayjs(returnDetailData.createTime).format("YYYY-MM-DD") : ""
          }}</el-descriptions-item>
        <el-descriptions-item label="用户账号" label-align="left" align="left" label-class-name="my-label"
          class-name="my-content" width="50px">{{ returnDetailData.memberUsername }}</el-descriptions-item>
        <el-descriptions-item label="联系人" label-align="left" align="left" label-class-name="my-label"
          class-name="my-content" width="50px">{{ returnDetailData.returnName }}</el-descriptions-item>
        <el-descriptions-item label="联系电话" label-align="left" align="left" label-class-name="my-label"
          class-name="my-content" width="50px">{{ returnDetailData.returnPhone }}</el-descriptions-item>
        <el-descriptions-item label="退货原因" label-align="left" align="left" label-class-name="my-label"
          class-name="my-content" width="50px">{{ returnDetailData.reason }}</el-descriptions-item>
        <el-descriptions-item label="问题描述" label-align="left" align="left" label-class-name="my-label"
          class-name="my-content" width="50px">{{ returnDetailData.description }}</el-descriptions-item>
        <el-descriptions-item label="凭证照片" label-align="left" align="left" label-class-name="my-label"
          class-name="my-content" width="50px"><img class="imgs"
            :src="returnDetailData.productPic" /></el-descriptions-item>
      </el-descriptions>

      <!-- 第二个表单 -->
      <el-descriptions class="first" :column="1" border>
        <el-descriptions-item label="订单金额" label-align="left" align="left" label-class-name="my-label"
          class-name="my-content" width="50px">{{ '￥' + returnDetailData.productRealPrice }}</el-descriptions-item>
        <el-descriptions-item label="确认退款金额" label-align="left" align="left" label-class-name="my-label"
          class-name="my-content" width="50px">
          <span>￥</span>
          <el-input v-model="returnDetailData.returnAmount" disabled v-if="returnDetailData.status !== 0" />
          <el-input v-model="priceIpt" v-if="returnDetailData.status === 0" /></el-descriptions-item>
        <el-descriptions-item label="选择收货点" label-align="left" align="left" label-class-name="my-label"
          class-name="my-content" width="50px">
          <el-select v-if="returnDetailData.status === 0" v-model="returnOptionsValue" style="width: 115px">
            <el-option v-for="item in returnOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
          <el-select v-if="returnDetailData.status !== 0" :model-value="returnDetailData.companyAddress?.addressName"
            style="width: 115px" :disabled="returnDetailData.status !== 0"></el-select>
        </el-descriptions-item>
        <el-descriptions-item label="收货人姓名" label-align="left" align="left" label-class-name="my-label"
          class-name="my-content" width="50px">
          {{ returnDetailData.companyAddress?.name ? returnDetailData.companyAddress?.name : "大梨" }}
        </el-descriptions-item>
        <el-descriptions-item label="所在区域" label-align="left" align="left" label-class-name="my-label"
          class-name="my-content" width="50px">
          <span style="margin-right: 4px;">{{ returnDetailData.companyAddress?.province }}</span>
          <span style="margin-right: 4px;">{{ returnDetailData.companyAddress?.city }}</span>
          <span>{{ returnDetailData.companyAddress?.region }}</span>
          <span v-if="!returnDetailData.companyAddress?.region">广东省 深圳市 南山区</span>
        </el-descriptions-item>
        <el-descriptions-item label="详细地址" label-align="left" align="left" label-class-name="my-label"
          class-name="my-content" width="50px">
          {{ returnDetailData.companyAddress?.detailAddress ? returnDetailData.companyAddress?.detailAddress : "科兴科学园" }}
        </el-descriptions-item>
        <el-descriptions-item label="联系电话" label-align="left" align="left" label-class-name="my-label"
          class-name="my-content" width="50px">
          {{ returnDetailData.companyAddress?.phone ? returnDetailData.companyAddress?.phone : "18000000000" }}
        </el-descriptions-item>
      </el-descriptions>

      <!-- 第三个表单 -->
      <el-descriptions class="first" v-if="returnDetailData.status === 2
        " :column="1" border>
        <el-descriptions-item label="处理人员" label-align="left" align="left" label-class-name="my-label"
          class-name="my-content" width="50px">{{ returnDetailData.handleMan }}</el-descriptions-item>
        <el-descriptions-item label="处理时间" label-align="left" align="left" label-class-name="my-label"
          class-name="my-content" width="50px">{{ returnDetailData.handleTime ?
            dayjs(returnDetailData.handleTime).format("YYYY-MM-DD") : "" }}</el-descriptions-item>
        <el-descriptions-item label="处理备注" label-align="left" align="left" label-class-name="my-label"
          class-name="my-content">
          <div style="width: 150px;">{{ returnDetailData.handleNote }}</div>
        </el-descriptions-item>
      </el-descriptions>
      <!-- 第四个表单 -->
      <el-descriptions v-if="returnDetailData.status === 2
        " class="first" :column="1" border>
        <el-descriptions-item label="收货人员" label-align="left" align="left" label-class-name="my-label"
          class-name="my-content" width="50px">{{ returnDetailData.handleMan }}</el-descriptions-item>
        <el-descriptions-item label="收货时间" label-align="left" align="left" label-class-name="my-label"
          class-name="my-content" width="50px">{{ returnDetailData.receiveTime ? dayjs(
            returnDetailData.receiveTime).format("YYYY-MM-DD") : "" }}</el-descriptions-item>
        <el-descriptions-item label="收货备注" label-align="left" align="left" label-class-name="my-label"
          class-name="my-content">
          <div style="width: 150px;">{{ returnDetailData.receiveNote }}</div>
        </el-descriptions-item>
      </el-descriptions>
      <!-- 未处理时的表单 -->
      <el-descriptions v-if="returnDetailData.status === 0
        " class="first" :column="1" border>
        <el-descriptions-item label="处理备注" label-align="left" align="left" label-class-name="my-label"
          class-name="my-content" width="50px">
          <el-input v-model="ipt" clearable />
        </el-descriptions-item>
      </el-descriptions>
      <div class="btns" v-if="returnDetailData.status !== 2 && returnDetailData.status !== 3"><el-button type="primary"
          @click="sureReturn(1, '退货')" v-if="returnDetailData.status === 0">确认退货</el-button>
        <el-button type="danger" v-if="returnDetailData.status === 0" @click="sureReturn(3, '拒绝')">拒绝退货</el-button>
        <el-button type="primary" v-if="returnDetailData.status === 1" @click="sureReturn(2, '收货')">确认收货</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router';
import * as returnApplyDetail from "@/request/oms_returnApplyDetail"
import { Ref, ref } from 'vue';
import { dayjs, ElMessage, ElMessageBox } from 'element-plus';
const route = useRoute()
const router = useRouter()
// 存放请求回来的数据
const returnDetailData: Ref<IReturnApplyDetailResultModel> = ref({})
const getReturnDetailIpr = () => {
  returnApplyDetail.selectDetailById(route.query.id as string).then(res => {
    if (res.code === 200) {
      returnDetailData.value = res.data
    }
  })
}
getReturnDetailIpr()
// 退货地址选择
const returnOptions = [
  {
    value: "1",
    label: '深圳发货点',
  },
  {
    value: "2",
    label: '北京发货点',
  },
  {
    value: "3",
    label: '南京发货点',
  },
]
const returnOptionsValue = ref("1")
// 价格输入框数据
const priceIpt = ref("")
// 未处理时的表单数据--处理备注
const ipt = ref("")
// 确定退货-确认收货
const sureReturn = (status: number, title: string) => {
  const statusParam = {
    companyAddressId: returnDetailData.value.companyAddressId!,
    handleMan: returnDetailData.value.handleMan!,
    handleNote: ipt.value!,
    id: returnDetailData.value.id!,
    receiveMan: returnDetailData.value.receiveMan!,
    receiveNote: ipt.value!,
    returnAmount: parseFloat(priceIpt.value)!,
    status: status
  }
  ElMessageBox.confirm("确定要进行此操作吗？", "操作提示", {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    returnApplyDetail.updateReturnApplyById({ id: returnDetailData.value.id!, statusParam }).then(res => {
      if (res.code === 200) {
        ElMessage.success(`确认${title}成功`)
        getReturnDetailIpr()
      } else {
        ElMessage.error(`确认${title}失败`)
      }
    })
  }).catch(() => {
    ElMessage.success("已取消操作")
  })
}

// 查看订单详情
const selectOrderDetail = () => {
  router.push({
    path: "orderDetail",
    query: { id: returnDetailData.value.orderId }
  })
}
</script>

<style lang="less" scoped>
.my-label {
  text-align: center;
  background: var(--el-color-success-light-9);
}

.my-content {
  text-align: center;
  background: var(--el-color-danger-light-9);
}

.commodity {
  border: 1px solid #ebeef5;
  padding: 16px 8px;
  margin-bottom: 15px;
}

.last {
  text-align: right;
  padding-right: 10px;
  margin-top: 10px;
  color: #f40;

  span {
    color: #606266;
  }
}

// 头部商品
.imgs {
  width: 80px;
  height: 80px;
}

.first {
  margin-bottom: 8px;
}

.el-input {
  width: 150px;
}

.service {
  padding: 16px 8px;
  border: 1px solid #ebeef5;
}

.btns {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
</style>